<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">设置选中</button>
    <select>
      <option>唱</option>
      <option>跳</option>
      <option >rap</option>
      <option >打篮球</option>
    </select>

    <script>
        // 找到下拉框
        const sel = document.querySelector('select')

        // 获取value：有value找value，没value找文本
        sel.addEventListener('change', function () {
            console.log(sel.value)
        })


        document.querySelector('#btn').addEventListener('click', function () {
            // 有value找value，此时没有value叫打篮球的，就没有选中
            // 如果没有value了找文本，文本有打篮球的就会被选中
            sel.value = '打篮球'
        })
    </script>
  </body>
</html>
